<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <!-- 引用公共依赖片段（Vue + Element Plus + Axios） -->
    <th:block th:replace="common/head-fragment :: common-head"></th:block>

    <!-- 2. 本地样式（iframe 适配 + 按钮布局） -->
    <link rel="stylesheet" href="/css/index.css"/>
</head>
<body>
<div class="container">
    <!-- 3. Thymeleaf 渲染后端标题 -->
    <h2 th:text="${pageTitle}">用户管理</h2>

    <!-- 4. Vue 挂载点（所有 Element Plus 组件必须在此内） -->
    <div id="app" th:inline="javascript">

        <div class="common-layout">
            <el-container>
                <el-header>
                    <!-- 4.1 打开弹窗的触发按钮 -->
                    <el-button
                            type="primary"
                            class="open-dialog-btn"
                            @click="dialogVisible = true"
                    >
                        点击打开上传页面弹窗
                    </el-button>

                    <!-- 4.2 Element Plus 弹窗（Vue3 用 v-model 绑定显示状态） -->
                    <el-dialog
                            title="上传图片页面"
                            v-model="dialogVisible"
                            width="50%"
                            height="90vh"
                            :modal="true"
                    >
                        <!-- 4.3 iframe 嵌入本地页面（路径从后端传递或固定） -->
                        <div class="iframe-container">
                            <iframe :src="uploadImageUrl"></iframe>
                        </div>
                    </el-dialog>
                </el-header>
                <el-main>
                    <div>
                        <img v-for="item in imageList" :key="item.id" :src="getImageUrl(item.imageUrl)" :alt="item.imageName" />
                    </div>

                </el-main>
                <el-footer>
                    <el-pagination background layout="prev, pager, next" :total="1000" />
                </el-footer>
            </el-container>
        </div>



    </div>
</div>

<!-- 5. Vue3 逻辑（用标准组合式 API，避免 <script setup> 与 createApp 混用） -->
<script>
    // 5.1 从全局 Vue 中获取所需 API
    const { createApp, ref ,onMounted} = Vue;
    // 5.2 从 Thymeleaf 接收后端数据（如本地页面路径、初始状态等）
    const backendData = /*[[${backendData}]]*/ {
        uploadImageUrl: '/page/uploadImage'  // 后端默认路径，可覆盖
    };


    // 5.3 创建 Vue 实例
    createApp({
        setup() {
            // 5.4 响应式变量（控制弹窗显示 + 本地页面路径）
            const dialogVisible = ref(false); // 初始隐藏弹窗
            const uploadImageUrl = ref(backendData.uploadImageUrl); // 本地页面路径
            // 5.4 新增：图片列表（假设后端返回图片 URL 列表）
            const imageList = ref([]);

            // 5.5 新增：获取图片 URL 的函数（假设后端返回 base64 编码）
            const getImageUrl = (imageUrl) => {
                return `/image/getImage?path=${encodeURIComponent(imageUrl)}`;
            };

            onMounted(() => {
                // 5.8 组件挂载后，从后端获取图片列表
                axios.get('/image/getAll')
                    .then(response => {
                        if (response.data.code === 200) {
                            console.log(response.data);
                            imageList.value = response.data.data.records; // 假设后端返回图片 URL 列表
                        } else {
                            ElMessage.error('获取图片列表失败：' + (response.data.msg || '未知错误'));
                        }
                    });
            });
            // 5.5 暴露变量给模板（模板中需用的变量必须 return）
            return {
                dialogVisible,
                uploadImageUrl,
                imageList,
                getImageUrl
            };

        }
    })
        .use(ElementPlus) // 5.6 注册 Element Plus 组件
        .mount('#app');    // 5.7 挂载到 #app 元素
</script>
</body>
</html>